<template>
    <div>
        <!-- 1.ref标签属性  和  $refs的对象 -->

        <!-- 为p添加ref属性  -->
        <p ref="op">{{txtVal}}</p>
        <button @click="hdClick">按钮</button>
        <hr>
        <Comp1Child ref="childComp" />
    </div> 
</template>

<script>
import Comp1Child from './Comp1Child.vue'
export default {
    name:'',
    components: {
        Comp1Child
    },
    props: {

    },
    data() {
        return {
            txtVal: '123'
        };
    },
    methods: {
        hdClick(){
            // 获取op这个标签
            // $refs是一个对象，专门用来收集这个组件中有ref属性的 标签或组件
            // 把 ref属性的值 作为自己的属性。通过这个属性获取到原生标签，可以进行dom操作

            // 获取p标签
            console.log(this.$refs.op)
            console.log(this.$refs.op.innerHTML)
            this.$refs.op.style.color = 'red'
            console.log('----------------------')

            // 获取子组件
            console.log(this.$refs.childComp.num) //获取子组件数据
            this.$refs.childComp.childNum()   //调用子组件方法
        }
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    
};
</script>

<style scoped lang="scss">

</style>
